<template>
    <div class="detailContainer bg-gray">
       <div class="pt20 pb20"><strong class="showMouse fwbold" @click="gotioHome">首页</strong> > 服务商详情</div>
       <div class="company-card pd20">
            <div class="row-start">
                <div class="width-4 center">
                    <img :src="`/api/public/file/v1/public/get/${products.companyLogo}`" alt="" style="width:140px;height:140px" @error="setDefaultImage">
                </div>
                <div class="width-16 ml20 pt20">
                     <div class="comTile">{{products.companyName}}</div>
                     <div class="mt10 color-grey">服务商地址：{{products.companyAddress}}</div>
                     <div class="mt10 color-grey">工作时间：{{ workDate(products.workDate) }} {{products.workBeginTime}}-{{products.workEndTime}}</div>
                     <div class="mt10 color-grey">联系电话：{{products.companyPhone}}</div>
                     <div class="mt10 color-grey">拥有<span class="color-red">{{products.productCount}}</span>个产品</div>
                     <div class="mt10 color-grey">服务满意率：{{products.satisfaction > 0 ? products.satisfaction: '-'}}%</div>
                </div>
            </div>
            <div class="corner-button">
                <el-button type="primary" @click="cancel" class="button1">返回</el-button>
                <el-button type="success" @click="addSave" class="button2">加入收藏</el-button>
            </div>
       </div>
      <el-card class="box-card mt30">
        <div slot="header" class="clearfix">
          <span>服务产品</span>
        </div>
        <div class="container">
           <el-button v-if="cardList.length > 4" :disabled="currentIndex <= 0" @click="prev()" circle icon="el-icon-arrow-left"></el-button>
           <div v-for="item,index in displayProducts" :key="index" class="mt10 ml15 width-6 mr15" @click="gotoProductDetal(item)">
              <div class="showMouse card-shadow pl5 pr5 pt5 pb20 mb20 relposition">
                  <div class="absposition">
                    <img v-if="item.parentProductTypeId === '1'" src="~@/assets/image/badge.png" style="width:92px;height:28px" alt="">
                    <img v-if="item.parentProductTypeId === '2'" src="~@/assets/image/badge2.png" style="width:92px;height:28px" alt="">
                  </div>
                  <div class="icon start productImage">
                      <img :src="`/api/public/file/v1/public/get/${item.productImg}`" style="max-width:100%; max-height:100%; object-fit:contain;" alt="" @error="setDefaultImage">
                  </div>
                  <!-- 单价 -->
                  <div class="mt20 ml10 fs18 color-red fwbold">
                    <span v-if="item.parentProductTypeId === '2'">面议</span>
                    <span v-else>{{$priceFormat(item.limitPrice, item.upperPrice)}} 元 </span>
                  </div>
                  <!-- 服务名称 -->
                  <div class="mt10 ml10 fs14">
                    <span>{{item.productName}} </span>
                  </div>
                  <div class="row-spaceb mt10 mr10">
                      <!-- 评分 -->
                      <div class="mt10 ml10 fs12">
                        <span class="color-red">评分：{{item.score}} </span>
                        <span class="color-grey ml30">交易次数：{{item.transNum || 0}} </span>
                      </div>
                      <!-- 交易次数 -->
                      <div class="ml10 fs12">
                        <el-button plain size="mini" style="color:blue" @click="gotoProductDetal(item)">详情</el-button>
                      </div>
                  </div>
              </div>
           </div>
           <el-button v-if="cardList.length > 4" :disabled="currentIndex + 4 > cardList.length" @click="next()" circle icon="el-icon-arrow-right"></el-button>
        </div>
      </el-card>
      <el-card class="box-card mt30">
        <div slot="header" class="clearfix">
          <span>服务商</span>
        </div>
         <div v-html="products.companyIntroduction"></div>
      </el-card>
    </div>
</template>

<script>
import { companyDetail,getProductList,serviceCollect } from '@/api/homeApi'
import { workDate } from '@/utils/index'
export default {
    name: 'ProductDetail',
    // Add your component logic here
    data() {
        return {
          workDate,
          activeName1: 'first',
          activeName2: 'second',
          currentIndex: 0,
          products: [
            { id: 1, image: 'productBg.png', name: 'Product 1', price: '$100' },
            { id: 2, image: 'productBg.png', name: 'Product 2', price: '$200' },
            { id: 3, image: 'productBg.png', name: 'Product 3', price: '$300' },
            { id: 4, image: 'productBg.png', name: 'Product 4', price: '$400' },
            { id: 5, image: 'productBg.png', name: 'Product 5', price: '$500' },
            { id: 6, image: 'productBg.png', name: 'Product 6', price: '$600' },
            // 更多产品...
          ],
        // 生成一个卡片式数组，包含12个元素，包含服务价格/单位、服务名称、服务评分，交易次数、服务券类型，服务头图
          cardList:[
          ],
        }
    },
    mounted() {
        let companyid = this.$route.query?.id
        if(companyid){
            this.getCompanyDetail(companyid)
            this.getCompanyProductList(companyid)
        }
    },
    computed: {
      displayProducts() {
         return this.cardList.slice(this.currentIndex, this.currentIndex + 4);
      },
    },
    methods: {
        next() {
          // 点击下一页，增加currentIndex，但不超过列表长度减4
          if (this.currentIndex + 4 < this.cardList.length) {
            this.currentIndex += 4;
          }
        },
        prev() {
          // 点击上一页，减少currentIndex，但不小于0
          if (this.currentIndex - 4 >= 0) {
            this.currentIndex -= 4;
          }
        },
        setDefaultImage(event) {
            event.target.src = require('@/assets/image/error.jpg');
        },
        gotoProductDetal(item){
            this.$router.push({path:'/productDetail',query:{id:item.productId}})
        },
        getCompanyDetail(id){
           companyDetail({companyId:id}).then(res => {
                this.products = res.data
            }).catch(err => {
                console.log(err)
            })
        },
        getCompanyProductList(id){
          getProductList({companyId:id, isAsc:true,pageNo:1,pageNum:999}).then(res => {
                this.cardList = res.rows.map(item => {
                  let productImg = item.productImg.includes('|') ? item.productImg.split('|')[0] : item.productImg;
                  return {
                    ...item,
                    productImg: productImg
                  }
                });
            }).catch(err => {
                console.log(err)
            })
        },
        gotioHome() {
            this.$router.push('/index')
        },
        cancel(){
            this.$router.go(-1)
        },
        addSave(){
            // this.$message({
            //     message: '加入收藏成功',
            //     type: 'success'
            // });
            serviceCollect({serviceId:this.products.companyId}).then(res => {
                if(res.code === 200){
                    this.$message({
                        message: '加入收藏成功',
                        type: 'success'
                    });
                }
            }).catch(err => {
                console.log(err)
            })
        }
    }
}
</script>

<style scoped>
/* Add your component styles here */
.detailContainer{
    margin: 0 auto;
    padding: 0px 15% 30px 15%;
}
.company-card{
    width: 100%;
    height: 260px;
    box-sizing: border-box;
    background-image: url('@/assets/image/companyBg2.jpg');
    background-size: 100% 100%;
    position: relative;
}
.comTile{
    font-size: 26px;
    font-family: MicrosoftYaHei;
    color: #333333;
    margin-bottom: 18px;
    font-weight: bold;
}
.corner-button{
  position: absolute;
  bottom: 40px;
  right: 40px;
}
.button1{
    width: 202px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid #436AF7;
    color: #436AF7;
}
.button2{
    width: 216px;
    height: 40px;
    background: #436AF7;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid #436AF7;
    margin-left: 40px;
}
.container {
  display: flex;
  align-items: center;
}

.arrow {
  font-size: 2em;
  width: 40px;
  height: 40px;
  padding: 0px;
}

.card-container {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  width: 100%;
  padding: 0 20px;
  height: 280px; /* Adjust this value as needed */
}


.card {
  width: 23%;
  transition: transform 0.5s ease-in-out;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.product-image {
  width: 100%;
  height: 200px;
}

.card-content {
  text-align: center;
}
.slide-move {
  transition: transform 1s;
}
.productImage{
  width:100%; 
  aspect-ratio: 1.5 / 1;
  display:flex; 
  justify-content:center; 
  align-items:center;
  background-image: url('~@/assets/image/productBg.png');
  background-size: 100% 100%;
}
/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  background-color: #D32521;
  color: white;
}

/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
  color: white;
}
/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  transition: none;
}
</style>